<template>
  <div class="pageWrapper" :class="{dark: theme==='dark'}">
    <h1 class="title">翻译逻辑演示</h1>
    <h2 class="title">{{ t('welcome') }}</h2>
    <el-button class="btn">{{ t('cart') }}</el-button>
    <el-select v-model="locale">
      <el-option label="中文" value="zh" />
      <el-option label="英文" value="en" />
    </el-select>
    <el-select v-model="theme">
      <el-option label="白天" value="light" />
      <el-option label="黑夜" value="dark" />
    </el-select>

  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: 'light',
      // 当前语言区域设定
      locale: 'zh',
      // 语言材料也就是字典, 每个语言中对应的表达语句
      messages: {
        // 多少个语言就要准备多少套
        zh: {
          // 字典当中应该是 key: value 的形式指定对应标志和翻译
          welcome: '亲,欢迎光临',
          cart: '购物车'
        },
        en: {
          welcome: 'Honey, welcome back',
          cart: 'shopping cart'
        }
      }
    }
  },
  created() {
    console.log(this.$t)
  },
  methods: {
    // 翻译函数, 通过输入一个标记, 可以根据当前语言设定找出对应的翻译语句
    t(str) {
      // 根据当前的 locale 语言区域设定, 找出语言翻译字典包
      // 根据传入的标记找到对应的翻译输出
      const dict = this.messages[this.locale]
      const res = dict[str]
      return res
    }
  }
}
</script>

<style lang="scss" scoped>
.pageWrapper {
  .title, .btn {
    color: #333;
    background: #eee;
  }

  &.dark {
    .title, .btn {
      color: #eee;
      background: #333;
    }
  }
}
</style>
